<template lang="html">
	<div class="me">
		<div class="head">
			<div style="margin-top: 15px;">

				<div class="content">
					<div class="ma"></div>
					<div class="big"></div>
					<div class="font">

						<p class="name">{{ username }}</p>
						<p class="autograph">{{ autograph }}</p>
						<div class="ov" v-show="isLogin">
							<router-link tag="div" to="/login">登录</router-link>
						 	<router-link tag="div" to="/register">注册</router-link>
						</div>
					</div>
				</div>
				<div class="xg">修改标签</div>
			</div>
		</div>
		<div class="cont" v-show="isShowList">
			<ul>
				<router-link to="/bill" tag="li">
					
					<div class="ov">
						<div class="big">我的账单</div>
						<div>></div>
					</div>
				</router-link>
				<router-link to="/collection" tag="li">
					<div class="ov">
						<div class="big">我的收藏</div>
						<div>></div>
					</div>
					
				</router-link>
				<router-link to="/personal" tag="li">
					<div class="ov">
						<div class="big">个人资料</div>
						<div>></div>
					</div>
					
				</router-link>
				<router-link to="/security" tag="li">
					<div class="ov">
						<div class="big">账户安全</div>
						<div>></div>
					</div>
					
				</router-link>
				<router-link to="/setup" tag="li">
					<div class="ov">
						<div class="big">设置</div>
						<div>></div>
					</div>
				</router-link>
			</ul>
		</div>
		<!--<router-view></router-view>-->
	</div>
</template>

<script>
	export default {
		name: "course",
		data() {
			return {
				
				// 判断是否登录
				isLogin:true,
				// 列表是否显示
				isShowList:false,
				// 用户名
				username:"",
				// 个性签名
				autograph:""
			}
		},
		created(){
			if(localStorage.getItem("username")){
				this.username = localStorage.getItem("username");
				this.isLogin = false;
				this.isShowList = true;
			}else{
				
			}
			if(localStorage.getItem("autograph")){
				this.autograph = localStorage.getItem("autograph");
			}
		}
	}
</script>

<style lang="less">
	.me .head {
		position: relative;
		overflow: hidden;
		background: #3aae95;
	}
	
	.me .head .content .ma {
		/*margin-bottom: 15px;*/
	}
	
	.me .head .content .big {
		width: 150/50rem;
		height: 150/50rem;
		border-radius: 50%;
		border: 1/50rem solid #fff;
		background: url(../me/images/head.png) -30/50rem -0/50rem;
		padding: 5/50rem;
		margin: 0 auto;
	}
	
	.me .head .content .font .name,
	.me .head .content .font .autograph {
		color: #fff;
		text-align: center;
		margin-top: 15/50rem;
	}
	
	.me .head .content .font .autograph {
		font-size: 16/50rem;
		margin-bottom: 20/50rem;
	}
	
	.me .head .content .font .name {
		font-size: 16/50rem;
		/*margin-bottom: 15/50rem;*/
	}
	.me .head .content .font .ov{
		overflow: hidden;
		width: 160/50rem;
		margin: 15/50rem auto;
	}
	.me .head .content .font .ov div{
		float: left;
		font-size: 20/50rem;
		color:#fff;
		width: 80/50rem;
		text-align: center;
		
	}
	.me .head .xg {
		position: absolute;
		font-size: 16/50rem;
		top: 10/50rem;
		right: 15/50rem;
		color: #fff;
		/*border: 1/50rem solid #fff;*/
		padding: 5/50rem 1050rem;
		border-radius: 40/50rem;
		z-index: 999;
	}
	.me .cont ul{
		background: #fff;
	}
	.me .cont ul li{
		height: 50/50rem;
		line-height: 50/50rem;
		border-bottom: 1/50rem solid #f2f2f2;
	}
	.me .cont ul li .ov{
		margin-left: 20/50rem;
		overflow: hidden;
		font-size: 16/50rem;
	}
	.me .cont ul li .ov div{
		font-size: 16/50rem;
		float: left;
	}
	.me .cont ul li .ov .big{
		width: 90%;
	}
</style>